<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%-- ${fn:length(list)} --%>
<script src="jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function(){
		  var result = randomNum(1,7);
		  $("#banner").attr("src","swf.banner/banner"+result+".swf");
		
	  	$(".search").click(function(){
			   var method="title";
			   var search_title=$("#search_title").val();
			   $("#result").empty().html(" <table width='200px' height='252px' ><tr><td align='center' valign='middle'><img src='img/loading.gif' align='center'></td></tr></table>");
			   $.ajax({
				    type:"post",
				    url:"mycinema.do",
				    data:"command=searchMovie&method="+method+"&search_title="+search_title,
				    dataType:"json",
				    success:function(data){
				     var result=data.result[0];
				     var table="<table width='200px' height='252px'>";
				     table+="<tr><td colspan='2'><font color='#696969'>"+result.MOVIE_TITLE+"<img src='img.grade/"+result.MOVIE_GRADE_NO+".png'></td></tr><tr>";
				     table+="<tr><td align='left' rowspan='4'><span id='main_poster'><img src='img.poster/"+result.MOVIE_NO+".jpg' width='100'></span></td>";     
				     table+="<td><font color='#696969'>"+result.RUNNING_TIME+"분</font></td></tr>";
				     table+="<tr><td><font color='#696969'>"+result.GENRE+"</font></td></tr>";
				     table+="<tr><td><font color='#696969'>"+result.COUNTRY+"</font></td></tr>";
				     table+="<tr><td><font color='#696969'>"+result.OPENING_DAY+"</td></tr>";
				     table+="<tr valign='top' height='40%'><td align='center'><a href='movie.do?command=getMovieDetail&movie_no="+result.movie_no+"'><img src='img/detail_btn.png'></a></td>";
				     table+="<td align='left'><a href='reservation.do?command=reservation'><img src='img/res_btn.png'></a></td></tr>";
				     table+="</table>";
				     $("#result").html(table);
				     $("#search_title").val("").focus();
			    	}
			   });
		  });
	});
	 var randomNum = function(num,range){
	        var k=0, randomNum = [];
	        while(k!=num){
	            var ramdomNum = Math.floor(Math.random() * range);
	            for(var j=0;j<randomNum.length;j++){
	                if(randomNum[j]==ramdomNum) break; 
	            }
		            if(j==randomNum.length){ randomNum.push(ramdomNum); k++; }
		        }
		        return randomNum;
		    }
</script>
	<script language="JavaScript">
		eye = {
			p : 0,
			x : 0,
			y : 0,
			w : 0,
			h : 0,
			r : 0,
			v : 0,
			s : 0,
			isVertical : 0,
			a1 : 0,
			a2 : 0,
			a3 : 0,
			color : '#ffffff',
			colorover : '#ffffff',
			backgroundcolor : '#0099ff',
			backgroundcolorover : '#000000',
			bordercolor : '#000000',
			fontsize : 12,
			fontfamily : 'Arial',
			pas : 0,
			spinmenu : function() {
				this.p = this.r / this.s;
				this.a1 = this.a2 = this.isVertical ? 0 : Math.PI / 2
			},
			spinmenuitem : function(a7, a6, a5) {
				a4 = " onclick='window.open(\"" + a6 + "\""+ (a5 ? (",\"" + a5 + "\"") : ",\"_self\"") + ")'";
				document.write("<div id='spinmenu"+ this.a3	+ "' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+ this.w
								+ "px;left:"	+ this.h+ "px;"	+ "background-color:"+ this.backgroundcolor	+ ";color:"+ this.color + ";border:1px solid "	+ this.bordercolor
								+ ";font:normal "	+ this.fontsize + "px "+ this.fontfamily	+ ";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""
								+ this.colorover	+ "\";this.style.backgroundColor=\""	+ this.backgroundcolorover + "\"'"	+ "onmouseout='this.style.color=\""
								+ this.color	+ "\";this.style.backgroundColor=\""	+ this.backgroundcolor + "\"'" + a4 + ">" + a7	+ "</div>");
				this.a3++;
			},
			muta : function() {
				a8 = document.getElementById("controale");
				for (i = 0; i < this.a3; i++) {
					a9 = document.getElementById("spinmenu" + i + "");
					a9s = a9.style;
					if (this.isVertical) {
						xi = parseInt(this.r * Math.cos(this.a1 + i * this.pas))
								/ this.s;
						yi = parseInt(this.r * Math.sin(this.a1 + i * this.pas));
						a10 = (this.p + xi) / (2 * this.p);
						a11 = this.fontsize * (this.p + xi) / (2 * this.p) + 2;
						a12 = parseInt(100 * (this.p + xi) / (2 * this.p))
					} else {
						xi = parseInt(this.r * Math.cos(this.a1 + i * this.pas));
						yi = parseInt(this.r * Math.sin(this.a1 + i * this.pas))
								/ this.s;
						a10 = (this.p + yi) / (2 * this.p);
						a11 = this.fontsize * (this.p + yi) / (2 * this.p) + 2;
						a12 = parseInt(100 * (this.p + yi) / (2 * this.p));
					}

					a13 = (this.w - 20) * a10 + 20;
					a14 = (this.h - 20) * a10 + 10;
					a9s.top = (yi + this.y - a14 / 2) + "px";
					a9s.left = (xi + this.x - a13 / 2) + "px";
					a9s.width = a13 + "px";
					a9s.fontSize = a11 + "px";
					a9s.zIndex = a12;
				}
				
				a8.style.top = this.y + (this.isVertical ? this.r : this.p) + this.h / 2 + 6;
				a8.style.left = this.x - a8.offsetWidth / 2;
				if (this.a1 != this.a2) {
					this.a1 = (this.a1 > this.a2) ? (this.a1 - this.pas/ this.v) : (this.a1 + this.pas / this.v);
					if (Math.abs(this.a1 - this.a2) < this.pas / this.v)
						this.a1 = this.a2;
					setTimeout("eye.muta()", 10)
				}
			},
			spinmenuclose : function() {
				this.pas = 2 * Math.PI / this.a3;
				eye.muta()
			}
		};

		function getposOffset(what, offsettype) {
			var totaloffset = (offsettype == "left") ? what.offsetLeft
					: what.offsetTop;
			var parentEl = what.offsetParent;
			while (parentEl != null) {
				totaloffset = (offsettype == "left") ? totaloffset
						+ parentEl.offsetLeft : totaloffset
						+ parentEl.offsetTop;
				parentEl = parentEl.offsetParent;
			}
			return totaloffset;
		}
	</script>
	<script type="text/javascript">
eye.isVertical = 0; //옆으로 회전 할때[0] , 상하로 회전할려면[1]
eye.x = 620; // 좌측으로부터 위치값
eye.y = 70; // 상단으로부터 위치값
eye.w = 200; // 메뉴 박스 가로넓이 설정
eye.h = 50; // 메뉴 박스 세로높이 설정
eye.r = 250; // 회전 반경를 설정 합니다
eye.v = 25; // 회전속도
eye.s = 7; // 간격 설정
eye.color = '#ffffff'; // 텍스트 색상설정
eye.colorover = '#ffffff'; // 마우스오버시 텍스트 색상설정
eye.backgroundcolor = '#0099ff'; // 메뉴박스 색상설정
eye.backgroundcolorover = '#990000'; // 메뉴박스 마우스오버시 색상설정
eye.bordercolor = '#000000'; //메뉴박스보드 색상
eye.fontsize = 12; // 텍스트 사이즈 설정
eye.fontfamily = 'Arial'; //폰트체
if (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") //relatively position it
eye.y+=getposOffset(eye.anchor, "top") //relatively position it

//menuitem: eye.spinmenuitem(text, link, target)
eye.spinmenuitem("<img src='img.poster/1.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=1","");
eye.spinmenuitem("<img src='img.poster/2.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=2","");
eye.spinmenuitem("<img src='img.poster/3.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=3","");
eye.spinmenuitem("<img src='img.poster/5.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=5","");
eye.spinmenuitem("<img src='img.poster/6.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=6","");
eye.spinmenuitem("<img src='img.poster/7.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=7","");
eye.spinmenuitem("<img src='img.poster/8.jpg' width='200' height='240'>","movie.do?command=getMovieDetail&movie_no=8","");
eye.spinmenuclose();
}
</script>
<br>
<table border='1' cellspacing='0'  bordercolor="#e6e6fa" >
	<tr bgcolor="#f5f5f5">
		<td >
			<table>
				<tr><td>Movie Search..</td></tr>
			</table>
			<table Background="img/main_search.png"  width='215px' height='32px' border='0'>
				<tr>
				<td width="83%" >
    &nbsp;<input type="text" placeholder="어벤져스" size="23" id="search_title">
				</td>
				<td class='search'></td>
				</tr>
			</table><br>
			  <div id="result">
			   <table width='200px' height='252px' >
			  	<tr><td colspan='2'><font color='#696969'>어벤져스<img src='img.grade/2.png'></td></tr><tr>
			    <tr><td align='left' rowspan='5'><span id="main_poster"><img src='img.poster/1.jpg' width='110' ></span></td>
			    <tr><td><font color='#696969'>142분</font></td></tr>
			    <tr><td><font color='#696969'>액션</font></td></tr>
  			    <tr><td><font color='#696969'>미국</font></td></tr>
			    <tr><td><font color='#696969'>2012-04-26</font></td></tr>
			    <tr valign="top" height="40%"><td align="center"><a href='movie.do?command=getMovieDetail&movie_no=1'><img src='img/detail_btn.png'></a></td>
			      <td align="left"><a href='reservation.do?command=reservation'><img src='img/res_btn.png'></a></td></tr>
			    </table>
			   </div>
		</td>
		<td>
			<table width='800px' height='350px'>
				<tr>
				<div id="controale" style="position: absolute">	
					<td align="left">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="img/leftarrow.png" onclick="eye.a2+=eye.pas;eye.muta()"	onfocus="this.blur()">
					</td>
					<td align="center">
						<img src="img/rightarrow.png" onclick="eye.a2-=eye.pas;eye.muta()"	onfocus="this.blur()">
					</td>
					</div>
				</tr>
			</table>
		</td>
		</tr>
		<tr>
			<td colspan='3'>
				<table border='0' width='100%' cellspacing='0'>
					<tr align="left">
						<td align="left" width="10%">
							<embed height="150" src="swf/1.swf">
						</td>
						<td align="left" width="10%">
							<embed id="banner" width="550" src="swf.banner/banner1.swf">
						</td>
						<td align="center">
						<img src="img/main_card.png">
						</td>
					</tr>
				</table>
			</td>
		</tr>
</table>

